import HttpUtil from './http'
import { Lazyload, Dialog, Toast, Icon, Button } from 'vant'
import AppLoading from '@/components/ui/UIAppLoading'
const Vutil = {}
Vutil.install = function(Vue) {
  // 1. 添加全局方法或属性
  // Vue.myGlobalMethod = function () {
  //   // 逻辑...
  // }

  // 2. 添加全局资源
  /**
   * input scrollIntoViewIfNeeded
   */
  Vue.directive('form-view', {
    bind(el) {
      el.addEventListener('click', handleFormView)
    },
    unbind(el) {
      el.removeEventListener('click', handleFormView)
    }
  })

  /**
   * input reg 按正则匹配 替换不可输入的字符
   * 配合v-model.lazy
   */
  Vue.directive('input-text', {
    bind(el, binding) {
      let reg = binding.value.reg
      let inputLock = false
      el.addEventListener('compositionstart', () => {
        inputLock = true
      })
      el.addEventListener('compositionend', () => {
        inputLock = false
      })
      el.addEventListener('input', e => {
        let val = e.target.value // 当前完整值
        // let inputVal = e.data // 当前输入的值
        if (!val || inputLock) return
        el.value = val.replace(reg, '')
      })
    }
  })

  Vue.directive('page-title', {
    bind(el, binding) {
      const title = binding.value.title
      document.title = title
    }
  })

  // 3. 注入组件
  // Vue.mixin({
  //   created: function () {
  //     // 逻辑...
  //   }
  // })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function() {
    // 逻辑...
  }
  Vue.prototype.$http = HttpUtil
  Vue.prototype.$debug = process.env.VUE_APP_DEBUG === 'DEBUG'

  // show or hide loading by func
  const LoadingVueCom = Vue.extend(AppLoading)
  Vue.prototype.$_app_Loading = {
    instance: null,
    timer: null,
    show() {
      if (this.instance) return
      // 延迟200ms 显示 (200ms内完成异步则无需显示)
      this.timer = setTimeout(() => {
        if (this.instance) return
        const loadingComponent = new LoadingVueCom()
        loadingComponent.$mount()
        this.instance = loadingComponent
        document.body.appendChild(loadingComponent.$el)
      }, 200)
    },
    hide() {
      clearTimeout(this.timer)
      this.timer = null
      if (!this.instance) return
      // 延迟500ms 隐藏 (一旦显示loading至少旋转500ms 防止闪屏)
      setTimeout(() => {
        try {
          if (!this.instance) return
          document.body.removeChild(this.instance.$el)
          this.instance.$destroy()
          this.instance = null
        } catch (e) {
          console.log(e)
        }
      }, 500)
    }
  }

  Toast.setDefaultOptions({ duration: 2000 })

  Vue.use(Lazyload)
    .use(Dialog)
    .use(Toast)
    .use(Icon)
    .use(Button)

  // use this.$dialog
  Dialog.setDefaultOptions({
    className: 'app_vant_dialog'
  })
  // app component
  Vue.component(AppLoading.name, AppLoading)
}

function handleFormView(event) {
  event.stopPropagation()
  let target = event.target
  // 不处理只读和禁用的元素
  if (target.readonly || target.disabled) {
    return
  }
  // 延时等待键盘弹出
  setTimeout(function() {
    target.scrollIntoViewIfNeeded()
  }, 500)
}

export default Vutil
